<template>
  <layout title="modal模态框">
    <layout-content title="基础使用">
      <options-list icon="menu" @click="defaultModal = true">弹出Modal</options-list>
    </layout-content>

    <layout-content title="显示取消按钮">
      <options-list icon="menu" @click="showCancelModal = true">显示取消按钮</options-list>
    </layout-content>

    <layout-content title="只显示取消按钮">
      <options-list icon="menu" @click="onlyCancelModal = true">只显示取消按钮</options-list>
    </layout-content>

    <layout-content title="自定义按钮样式">
      <options-list icon="menu" @click="customBtnModal = true">自定义按钮样式</options-list>
    </layout-content>
  </layout>

  <tn-modal v-model="defaultModal" :data="defaultModalData"></tn-modal>
  <tn-modal v-model="showCancelModal" :data="defaultModalData" show-cancel></tn-modal>
  <tn-modal v-model="onlyCancelModal" :data="defaultModalData" show-cancel :show-confirm="false"></tn-modal>
  <tn-modal v-model="customBtnModal" :data="customBtnModalData" show-cancel></tn-modal>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import OptionsList from '@/components/components-option-list/index.vue'

import TnModal from '@/tuniao-ui/components/tn-modal/src/Modal.vue'
import { ModalDataType } from '@/tuniao-ui/types'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// modal配置参数
let defaultModal = ref<boolean>(false)
const defaultModalData: ModalDataType = {
  title: '提示',
  content: '确定需要删除吗?'
}

let showCancelModal = ref<boolean>(false)
let onlyCancelModal = ref<boolean>(false)

let customBtnModal = ref<boolean>(false)
const customBtnModalData: ModalDataType = {
  title: '提示',
  content: '确定不使用图鸟UI吗?',
  cancel: {
    text: '不使用',
    bgColor: '#FAD8D6',
    color: '#E83A30'
  },
  confirm: {
    text: '使用',
    bgColor: '#D6FADB',
    color: '#27B93A'
  }
}
</script>

<style lang="scss" scoped>

</style>
